<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:h="http://java.sun.com/jsf/html">
    <p:blockUI block=":frmConfiguraOpciones:panPerfiles" widgetVar="blkPanelPerfil" >
        Espere mientras se cargan los datos<br /> 
        <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
    </p:blockUI>
    <p:blockUI block=":frmConfiguraOpciones" widgetVar="blkPanelPerfilOpciones" >
        Espere mientras se procesan los datos<br /> 
        <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
    </p:blockUI>
    <style type="text/css">
        .ui-chkbox{
            cursor: pointer;
        }
    </style>
    <h:form id="frmConfiguraOpciones" onkeypress="if (event.keyCode == 13) return false;">
        <p:panel>
            <table style="width:100%;" >
                <thead>
                    <tr>
                        <td>
                            <div style="width: 400px; overflow: hidden;float: left;">
                                <table width="100%" cellpadding="5" cellspacing="8" style="width: 400px;">
                                    <tr>
                                        <td><h:outputText value="Perfil :"/> </td>
                                        <td>
                                            <p:inputText id="txtNomPerfil" value="#{perfilController.selectedPerfil.txtPerfil}"
                                                         style="width: 310px;" disabled="true" styleClass="disabled">
                                            </p:inputText>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div style="padding-top: 11px;float: right;">
                                <p:commandButton icon="ui-icon-search" value="Opciones Asignadas" process="@this" 
                                                 style="float:right;margin-bottom: 5px;margin-right: 0px;"
                                                 actionListener="#{perfilController.visualizaOpciones}"
                                                 update=":dlgVerOpcionesDePerfil" oncomplete="verOpcionesDePerfil.show()"/>
                            </div>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div style="height: 340px;width: 380px;overflow:hidden;float: left;">
                                <p:tree id="docTree" value="#{perfilController.moduloTreePerfil}" var="per" style="width: 370px;height: 333px;overflow:hidden;" 
                                        selectionMode="single" selection="#{perfilController.selectedModuloNodePerfil}" 
                                        dynamic="true" animate="true"> 
                                    <p:ajax event="select" update=":frmConfiguraOpciones:panPerfilesOpcion" 
                                            oncomplete="blkPanelPerfil.hide();"
                                            onstart="blkPanelPerfil.show();" listener="#{perfilController.onNodeSelectActivos}" /> 
                                    <p:treeNode expandedIcon="ui-icon-folder-open"  
                                                collapsedIcon="ui-icon-folder-collapsed" >  
                                        <h:outputText value="#{per}" /> 
                                    </p:treeNode>
                                    <p:treeNode type="document" icon="ui-icon-document">
                                        <h:outputText value="#{per}" />  
                                    </p:treeNode> 
                                </p:tree>
                            </div>
                            <div style="float: left;width: 670px;height: 340px">
                                <p:panel id="panPerfiles" style="float: left;width: 710px;height: 330px;">
                                    <p:panel id="panPerfilesOpcion" style="width: 680px;height: 300px;border: 0px;">
                                        <div style="height: 280px; overflow-y: auto;overflow-x:hidden;">
                                            <div class="ui-datatable ui-widget">
                                                <table style="">
                                                    <thead>
                                                        <tr>
                                                            <th class="ui-widget-header" style="text-align: center; width: 200px">
                                                                <div class="ui-dt-c" style="width:100%;"><span>Opción</span></div>
                                                            </th>
                                                            <th class="ui-widget-header" style="text-align: center; width: 60px">
                                                                <div class="ui-dt-c" style="width:100%;"><span>Activo</span></div>
                                                            </th>
                                                            <th class="ui-widget-header" style="text-align: center; width: 60px">
                                                                <div class="ui-dt-c" style="width:100%;"><span>Consulta</span></div>
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <ui:repeat var="opcionAut" value="#{perfilController.listaOpcionesAutorizadas}" >
                                                            <tr class="ui-widget-content ui-datatable-odd" >
                                                                <td style="text-align: center; width: 200px">
                                                                    <div class="ui-dt-c" style="width:100%;">
                                                                        <div style="text-align: center;">#{opcionAut.txtOpcion}</div>
                                                                    </div>
                                                                </td>
                                                                <td style="text-align: center; width: 60px">
                                                                    <div class="ui-dt-c">
                                                                        <div style="text-align: center;">
                                                                            <p:selectBooleanCheckbox value="#{opcionAut.bflgActivo}" >
                                                                                <p:ajax update=":frmConfiguraOpciones:panPerfilesOpcion" listener="#{perfilController.agregaOpcionParaPerfil(opcionAut)}"/>  
                                                                            </p:selectBooleanCheckbox>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td style="text-align: center; width: 60px">
                                                                    <div class="ui-dt-c">
                                                                        <div style="text-align: center;">
                                                                            <p:selectBooleanCheckbox value="#{opcionAut.bflgConsulta}" disabled="#{!opcionAut.bflgActivo}">
                                                                            </p:selectBooleanCheckbox>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </ui:repeat>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </p:panel>
                                </p:panel>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p:panel>
        <p:toolbar>
            <p:toolbarGroup align="right">
                <p:commandButton icon="ui-icon-disk" value="Grabar" style="margin-right: 40px;" actionListener="#{perfilController.validaPerfilOpcionEnCascada}"
                                 update=":frmConfiguraOpciones:msjConfigOpciones, :frmConfiguraOpciones:panPerfilesOpcion"
                                 oncomplete="blkPanelPerfilOpciones.hide()" onstart="blkPanelPerfilOpciones.show()"/>
                <p:commandButton icon="ui-icon-close" value="Cerrar" process="@this" onclick="wGestionarOpcionesPerfil.hide()"/>
            </p:toolbarGroup>
        </p:toolbar>
        <p:messages id="msjConfigOpciones" showDetail="true" showSummary="false"/>
    </h:form>
</ui:composition>